import React,{useEffect} from 'react'
import Bottom from './Bottom'
import './App.css'
import * as echarts from 'echarts'



const Table = () => {

  useEffect(()=>{
    // console.log(document.querySelector('#table'));//可以得到结点
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('#table'));//获取不到元素，还没有挂载成功
    //绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
        left:'center',

      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  },[]);

  //console.log(document.querySelector('#table'));//不能直接写js图表，获取不到元素，还没有挂载成功
 
  return (
    <div>
      
      <div id="table" style={{height:300}}>
        {/* 默认高度是0，宽100%，需要设高 */}
      </div>
      <div className="bottom"><Bottom/></div>
    </div>
  )
}

export default Table